<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./jedate/jedate.css">
    <style>
        /* li {
            list-style: none
        } */
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        .box {
            width: 1000px;
            /* width: 100%; */
            position: relative;
            top: 200px;
        }
    </style>
</head>

<body>
    <div class="box">

        <div id="test"></div>
    </div>
</body>

<!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
<script src="./jquery/jquery-3.5.1.min.js"></script>
<script src="./jQuery.molyDragTimeLine.js"></script>
<!-- 时间控件js -->
<script src="./jedate/jedate.js"></script>
<script type="text/javascript">

    /*编写插件*/

    /*调用插件*/
    $(function () {
        // console.dir($.fn);
        // return
        var datas = {}, downloadTime = {}
        //绑定元素事件
        $.fn.moly_DragTimeline({
            domId: 'test',
            downloadTipText: getNowFormatDate(),
            timeLineBackground: '#0b2653',
            downloadLineBackground: 'linear-gradient(#008b81, #133679)',
            selectedDownloadLineBackground: "linear-gradient(#e4ad3e, #8b3b12)",
            tipTextBackground: "#008b81",
            timeList: [
                { label: '00:00', value: 0 },
                { label: '01:00', value: 1 },
                { label: '02:00', value: 2 },
                { label: '03:00', value: 3 },
                { label: '04:00', value: 4 },
                { label: '05:00', value: 5 },
                { label: '06:00', value: 6 },
                { label: '07:00', value: 7 },
                { label: '08:00', value: 8 },
                { label: '09:00', value: 9 },
                { label: '10:00', value: 10 },
                { label: '11:00', value: 11 },
                { label: '12:00', value: 12 },
                { label: '13:00', value: 13 },
                { label: '14:00', value: 14 },
                { label: '15:00', value: 15 },
                { label: '16:00', value: 16 },
                { label: '17:00', value: 17 },
                { label: '18:00', value: 18 },
                { label: '19:00', value: 19 },
                { label: '20:00', value: 20 },
                { label: '21:00', value: 21 },
                { label: '22:00', value: 22 },
                { label: '23:00', value: 23 }
            ],
            videoTime: [{ start: '10:35', end: '10:55' }, { start: '5:35', end: '6:55' }, { start: '1:35', end: '3:55' }, { start: '0:0', end: '0:15' }]
        }, function callback(datas) {
            // console.log(datas); //以获取值成功
        }, function downloadFun(downloadTime) {
            // console.log(downloadTime);
        });
        
        //获取当前时间 yyyy-MM-dd
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate =
                date.getFullYear() + seperator1 + month + seperator1 + strDate;
            return currentdate;
        }
    });

</script>

</html>